Component({
	options: {
		"styleIsolation": "apply-shared"
	},
	properties: {

	},
	data: {

	},
	methods: {

	},
	ready(){
    const query = wx.createSelectorQuery().in(this)
    query.select('#myCanvas').fields({node: true, size: true}).exec(res => {
      const canvas = res[0].node
			const ctx = canvas.getContext('2d')
			// 初始化宽高
			const width = res[0].width
			const height = res[0].height
			let dpr = wx.getWindowInfo().pixelRatio
			canvas.width = width * dpr
			canvas.height = height * dpr
			ctx.scale(dpr, dpr)
			ctx.clearRect(0, 0, width, height)
			
			const deg = Math.PI*2/360
			let count = 0
			let timer = setInterval(function(){
				count = count + 2
				ctx.clearRect(0, 0, width, height)
				ctx.beginPath()
				ctx.arc(50, 50, 43, 0, Math.PI*2, true)
				ctx.lineWidth = 12
				ctx.strokeStyle = 'rgba(0, 82, 217, 0.1)'
				ctx.stroke()
				ctx.beginPath()
				ctx.shadowColor = 'rgba(0, 82, 217, 0.2)';
    		ctx.shadowOffsetY = 5;
    		ctx.shadowOffsetX = 5;
      	ctx.shadowBlur = 10;
				ctx.arc(50, 50, 37, -Math.PI/2, count*deg - Math.PI/2, false)
				ctx.lineWidth = 12
				ctx.strokeStyle = 'rgba(0, 82, 217, 1)'
				ctx.stroke()	
				if(count == 90){
					clearInterval(timer)
				}
			}, 5)
    })
	}
})